<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VSCode 布局风格 MCP 客户端示例</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="vscode-layout">
        <!-- 顶部导航栏 -->
        <header class="vscode-header">
            <div class="header-left">
                <div class="app-title">MCP Client Demo</div>
                <nav class="connection-tabs">
                    <button class="connection-type-tab active" data-type="sse">SSE</button>
                    <button class="connection-type-tab" data-type="streamable">Streamable</button>
                    <button class="connection-type-tab" data-type="websocket">WebSocket</button>
                </nav>
            </div>
            <div class="header-right">
                <button id="clear-log-btn" class="btn-small btn-secondary">清除日志</button>
                <button id="send-request-btn" class="btn-primary" disabled>发送请求</button>
            </div>
        </header>



        <!-- 布局内容区 -->
        <div class="vscode-content">
            <!-- 左侧边栏 -->
            <aside class="vscode-sidebar">
                <!-- 连接配置 -->
                <div class="sidebar-section">
                    <h3>连接配置</h3>
                    <div class="input-group">
                        <label for="server-url">服务器 URL:</label>
                        <input type="text" id="server-url" value="http://localhost:8081/sse" placeholder="输入服务器地址，连接类型将根据上方选择自动调整">
                    </div>
                    <div class="button-group vertical">
                        <button id="connect-btn" class="btn-success">连接服务器</button>
                        <button id="disconnect-btn" class="btn-danger" disabled>断开连接</button>
                        <button id="terminate-btn" class="btn-warning" disabled>终止会话</button>
                    </div>
                </div>

                <!-- 客户端能力 -->
                <div class="sidebar-section">
                    <h3>客户端能力</h3>
                    <div class="checkbox-group">
                        <label><input type="checkbox" id="capability-logs" class="capability-checkbox" checked> 日志功能</label>
                        <label><input type="checkbox" id="capability-prompts" class="capability-checkbox" checked> 提示词功能</label>
                        <label><input type="checkbox" id="capability-resources" class="capability-checkbox" checked> 资源功能</label>
                        <label><input type="checkbox" id="capability-tools" class="capability-checkbox" checked> 工具调用</label>
                        <label><input type="checkbox" id="capability-completions" class="capability-checkbox" checked> 补全功能</label>
                    </div>
                    
                    <!-- 认证设置信息 -->
                    <div class="info-section">
                        <h4>认证支持</h4>
                        <div class="auth-setting">
                            <label><input type="checkbox" id="auth-enabled" class="auth-checkbox" checked> 启用认证支持</label>
                        </div>
                        <div class="auth-methods">
                            <span class="auth-method">✅ OAuth 2.0</span>
                            <span class="auth-method">✅ Basic Auth</span>
                        </div>
                        
                        <!-- 认证信息输入 -->
                        <div id="auth-details" class="auth-details">
                            <div class="input-group">
                                <label for="auth-type">认证类型:</label>
                                <select id="auth-type">
                                    <option value="oauth2">OAuth 2.0</option>
                                    <option value="basic">Basic Authentication</option>
                                </select>
                            </div>
                            
                            <!-- OAuth 2.0 设置 -->
                            <div id="oauth2-settings" class="auth-settings">
                                <div class="input-group">
                                    <label for="oauth2-token">Access Token:</label>
                                    <input type="text" id="oauth2-token" placeholder="输入OAuth 2.0访问令牌">
                                </div>
                            </div>
                            
                            <!-- Basic Auth 设置 -->
                            <div id="basic-auth-settings" class="auth-settings" style="display: none;">
                                <div class="input-group">
                                    <label for="basic-username">用户名:</label>
                                    <input type="text" id="basic-username" placeholder="输入用户名">
                                </div>
                                <div class="input-group">
                                    <label for="basic-password">密码:</label>
                                    <input type="password" id="basic-password" placeholder="输入密码">
                                </div>
                            </div>
                        </div>
                        
                        <p class="info-text">可通过复选框控制是否启用认证支持，当前支持 OAuth 2.0 和 Basic Authentication</p>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="sidebar-section">
                    <h3>快速操作</h3>
                    <div class="button-group vertical">
                        <button data-action="ping" class="quick-action-btn btn-info" disabled>测试连接 (ping)</button>
                        <button data-action="getServerInfo" class="quick-action-btn btn-info" disabled>获取服务器信息</button>
                        <button data-action="getCapabilities" class="quick-action-btn btn-info" disabled>获取服务器能力</button>
                    </div>
                </div>
            </aside>

            <!-- 主内容区 -->
            <main class="vscode-main">
                <!-- 自定义请求面板 -->
                <div class="panel request-panel">
                    <div class="panel-header">
                        <h2>自定义请求</h2>
                    </div>
                    <div class="panel-content">
                        <div class="input-group">
                            <label for="request-method">请求方法:</label>
                            <select id="request-method">
                                <option value="ping">ping</option>
                                <option value="getServerInfo">getServerInfo</option>
                                <option value="completion/complete">completion/complete</option>
                                <option value="logging/setLevel">logging/setLevel</option>
                                <option value="prompts/get">prompts/get</option>
                                <option value="prompts/list">prompts/list</option>
                                <option value="resources/list">resources/list</option>
                                <option value="resources/templates/list">resources/templates/list</option>
                                <option value="resources/read">resources/read</option>
                                <option value="resources/subscribe">resources/subscribe</option>
                                <option value="resources/unsubscribe">resources/unsubscribe</option>
                                <option value="tools/call">tools/call</option>
                                <option value="tools/list">tools/list</option>
                            </select>
                        </div>
                        <div class="input-group">
                            <label for="request-params">请求参数 (JSON 格式):</label>
                            <textarea id="request-params">{"prompt": "Hello, world!"}</textarea>
                        </div>
                        <!-- 发送请求按钮已移至顶部导航栏 -->
                    </div>
                </div>

                <!-- 请求结果面板 -->
                <div class="panel result-panel">
                    <div class="panel-header">
                        <h2>请求结果</h2>
                    </div>
                    <div class="panel-content">
                        <textarea id="request-result" readonly placeholder="请求结果将显示在这里..."></textarea>
                    </div>
                </div>
            </main>

            <!-- 右侧边栏 (Client API操作) -->
            <aside class="vscode-sidebar-right">
                <div class="sidebar-section">
                    <h3>Client API 操作</h3>
                    <div class="api-section">
                        <div class="api-category">
                            <div class="feature-title">工具管理</div>
                            <button data-action="listTools" class="quick-action-btn btn-secondary" disabled>列出工具 (listTools)</button>
                            <button data-action="callTool" class="quick-action-btn btn-secondary" disabled>调用工具 (callTool)</button>
                        </div>
                        <div class="api-category">
                            <div class="feature-title">补全功能</div>
                            <button data-action="complete" class="quick-action-btn btn-secondary" disabled>文本补全 (complete)</button>
                        </div>
                        <div class="api-category">
                            <div class="feature-title">资源管理</div>
                            <button data-action="listResources" class="quick-action-btn btn-secondary" disabled>列出资源 (listResources)</button>
                            <button data-action="readResource" class="quick-action-btn btn-secondary" disabled>读取资源 (readResource)</button>
                        </div>
                        <div class="api-category">
                            <div class="feature-title">资源订阅</div>
                            <button data-action="subscribeResource" class="quick-action-btn btn-secondary" disabled>订阅资源 (subscribeResource)</button>
                            <button data-action="unsubscribeResource" class="quick-action-btn btn-secondary" disabled>取消订阅 (unsubscribeResource)</button>
                        </div>
                        <div class="api-category">
                            <div class="feature-title">会话信息</div>
                            <button data-action="getSessionInfo" class="quick-action-btn btn-secondary" disabled>获取会话信息</button>
                            <button data-action="getClientInfo" class="quick-action-btn btn-secondary" disabled>获取客户端信息</button>
                        </div>
                    </div>
                </div>
            </aside>
        </div>

        <!-- 底部日志面板和状态栏 -->
        <div class="vscode-footer">
            <!-- 日志面板 -->
            <div class="panel logs-panel">
                <div class="panel-header">
                        <h2>日志输出</h2>
                        <!-- 清除日志按钮已移至顶部导航栏 -->
                    </div>
                <div class="panel-content">
                    <div class="log-container" id="log-container">
                        <!-- 日志输出将在这里显示 -->
                    </div>
                </div>
            </div>
            <!-- 底部状态栏 -->
            <div class="vscode-statusbar">
                <div class="statusbar-right">
                    <span id="connection-status-span">未连接</span>
                    <span id="server-info-span">-</span>
                    <span id="session-id-span">-</span>
                </div>
            </div>
        </div>
    </div>

    <script src="../../dist/client.js"></script>
    <script src="js/app.js" type="module"></script>
</body>
</html>
